<template>
  <div class="msg-detail-container">
    <Headbar/>
    <MemberHeadMenu/>
    <Hungbar/>
    <div class="yh-layout-box msg-detail-content mt-20 bg-white">
      <div class="msgDetail-header">
        <span class="msgDetail-header-title fl">协议订单邀约</span>
        <span class="msgDetail-date fr">2019-05-22</span>
      </div>
      <div class="msgDetail-wrap">
        <p class="msgDetail-tips">卖家 XXXX 为您发起一条协议订单邀约，请注意查收并确认，如有疑问可联系卖家确认</p>
        <div class="msgDetail-table">
            <div class="msgDetail-table-th">
              <span class="xorder-size tcenter">协议订单模板编号</span>
              <span class="xorder-startTime tcenter">发起时间</span>
              <span class="xorder-orderTotal tcenter">订单总金额</span>
              <span class="xorder-stockTime tcenter">备货时间</span>
              <span class="xorder-pay tcenter">付款方式</span>
              <span class="xorder-invite tcenter">邀约时间</span>
            </div>
            <div class="msgDetail-item">
              <span class="xorder-size tcenter">1234567890</span>
              <span class="xorder-startTime tcenter">2019-05-22 16:00</span>
              <span class="xorder-orderTotal tcenter">￥1234,00</span>
              <span class="xorder-stockTime tcenter">15天</span>
              <span class="xorder-pay tcenter">全额付款</span>
              <span class="xorder-invite tcenter">
                <span class="xorder-invite-state accept-state">已接受</span>
                <!-- <span class="xorder-invite-state wait-state">等待买家处理</span> -->
              </span>
            </div>
        </div>
        <div class="msgDetail-view mt-20">
          <div class="msgDetail-left-con fl">
            <img src="@/assets/images/member/xorder.png"/>
            <a class="clickView">点击查看协议</a>
          </div>
          <div class="msgDetail-right-con fl">
            <p>请下载并打印协议，盖章后扫描上传</p>
            <a class="download-xy">下载协议</a>
          </div>
        </div>
        <div class="download-textTips mt-20">已为您生成订单XXXXXXXXX，可在订单列表中查询，请将协议下载打印盖章后扫描上传</div>
        <div class="msgDetail-button-item">
          <a class="msg-bottom-btn linkBuyer-btn">联系卖家</a>
          <a class="msg-bottom-btn viewDetail-btn">查看订单详情</a>
        </div>
      </div>
    </div>
    <Footbars/>
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar'
import MemberHeadMenu from '../components/MemberHeadMenu';
import Hungbar from '@/components/Layouts/Hungbar'
import Footbars from '@/components/Layouts/Footbars'
import Pagination from '@/components/Pagination'
import {  } from '@/api/search'
export default {
  name: 'MsgDetail',
  components: {
    Headbar,
    MemberHeadMenu,
    Hungbar,
    Footbars,
    Pagination
  },
  data() {
    return {

    }
  },
  created() {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.msg-detail-container{
  .msg-detail-content{
    border: 1px solid #eee;
    box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.06);
    .msgDetail-header{
      height: 56px;
      line-height: 56px;
      border-bottom: 1px solid #eee;
      .msgDetail-header-title{
        font-size: 16px;
        color: #333;
        margin-left: 20px;
      }
      .msgDetail-date{
        font-size: 14px;
        color: #888;
        margin-right: 20px;
      }
    }
    .msgDetail-wrap{
      padding: 30px 40px;
      .msgDetail-tips{
        color: #666;
        font-size: 14px;
        margin-top: 0;
      }
      .msgDetail-table{
        border: 1px solid #eee;
        .msgDetail-item{
          background: #F3F3F3;
          height: 50px;
          line-height: 50px;
          color: #333;
        }
        .msgDetail-table-th{
          background: #F3F3F3;
          height: 50px;
          line-height: 50px;
          border-bottom: 1px solid #fff;
          color: #666;
        }
        .xorder-size{
          display: inline-block;
          width: 220px;
        }
        .xorder-startTime{
          display: inline-block;
          width: 220px;
        }
        .xorder-orderTotal{
          display: inline-block;
          width: 200px;
        }
        .xorder-stockTime{
          display: inline-block;
          width: 160px;
        }
        .xorder-pay{
          display: inline-block;
          width: 160px;
        }
        .xorder-invite{
          display: inline-block;
          width: 158px;
          .accept-state{
            color: #26AB4A;
          }
          .wait-state{
            color: #FF8C25;
          }
        }
      }
      .msgDetail-view{
        height: 140px;
        border: 1px solid #eee;
        .msgDetail-left-con{
          width: 158px;
          height: 140px;
          background: #E9EEF3;
          text-align: center;
          img{
            display: block;
            margin: 15px auto;
            width: 80px;
            height: 80px;
          }
          .clickView{
            color: #5789B2;
          }
        }
        .msgDetail-right-con{
          p{
            margin: 35px 0 20px 20px;
            color: #888;
          }
          .download-xy{
            display: inline-block;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #255B8B;
            color: #255B8B;
            border-radius: 6px;
            margin-left: 20px;
          }
        }
      }
      .download-textTips{
        color: #888;
      }
      .msgDetail-button-item{
        text-align: center;
        margin-top: 30px;
        .msg-bottom-btn{
          display: inline-block;
          width: 160px;
          height: 44px;
          line-height: 44px;
          border: 1px solid #255B8B;
          color: #255B8B;
          font-size: 14px;
          border-radius: 10px;
          text-align: center;
        }
        .linkBuyer-btn{
          margin-right: 40px;
        }
        .viewDetail-btn{
          color: #fff;
          background: #255B8B;
        }
      }
    }
  }
}
</style>
